<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.3/echarts.min.js"></script>
    <script type="text/javascript" src="https://static.pocketlive.tv/static/plugins/jquery.min.js"></script>
    <script src="https://static.pocketlive.tv/static/plugins/DatePicker/WdatePicker.js"></script>
</head>
<body>
	
	<form action="" method="get">
	<span>IP: <input type="text" name="ip" value="<?php echo $ip = isset($_GET['ip'])?$_GET['ip']:'';?>"></span>
	<span class="filter-bar">Time:
    	<input id="historyStart" value="<?php echo $start = !empty($_GET['start'])?$_GET['start']:date('Y-m-d', time());?>" name="start" type="text" placeholder="start time" readonly="true" class="birthday" value="" onFocus="WdatePicker({lang:'en',skin:'twoer',dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'historyEnd\')||\'{%y}-{%M}-{%d}\'}',minDate:'{%y-1}-%M-{%d-1}'})">
        <input id="historyEnd" value="<?php echo $end = !empty($_GET['end'])?$_GET['end']:date('Y-m-d',strtotime('+1 day'));?>" name="end" type="text" placeholder="end time" readonly="true" class="birthday" value="" onFocus="WdatePicker({lang:'en',skin:'twoer',dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'historyStart\')}'})">
    </span>
    <input type="submit">
	</form>
	<span><a href="<?php echo $html;?>?ip=54.67.47.33&start=<?php echo $start;?>&end=<?php echo $end;?>">54.67.47.33</a></span>
	<?php 
	if (!empty($rtmp)) {
		$rtmp  = array_unique($rtmp);
		foreach ($rtmp as $item) {
	?>
	<span>&nbsp;&nbsp;<a href="<?php echo $html;?>?ip=<?php echo $item;?>&start=<?php echo $start;?>&end=<?php echo $end;?>"><?php echo $item;?></a></span>
	<?php }
	}?>
	<br/><br/>
    <div id="main" style="width: 1800px;height:600px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        chart();
     	setInterval(function () {
     		chart();
		}, 60000);
		function chart() {
			myChart.showLoading();
			$.get("<?php echo $url;?>?ip=<?php echo $ip;?>&start=<?php echo $start;?>&end=<?php echo $end;?>").done(function (data) {
	        	myChart.hideLoading();
		 		if (data) {
		 			data = $.parseJSON(data);
		            myChart.setOption({
		            	title: {
		            	text: 'SRS连接数曲线',
		            },
		            tooltip: {
		                trigger: 'axis'
		            },
		            legend: {
		            	 data:['平均值','峰值']
		            },
		            xAxis:  {
		                type: 'category',
		                boundaryGap: false,
		                data: data.time
		            },
		            yAxis: {
		                type: 'value',
		            },
		            series: [
		                {
		                    name:'平均值',
		                    type:'line',
		                    data: data.avgnums,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:60},
		                            {type: 'min', name: '最小值', symbolSize:60}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '平均值'}
		                        ]
		                    }
		                },
		                {
		                    name:'峰值',
		                    type:'line',
		                    data: data.maxnums,
		                    markPoint: {
		                        data: [
		                            {type: 'max', name: '最大值', symbolSize:80},
		                            {type: 'min', name: '最小值', symbolSize:80}
		                        ]
		                    },
		                    markLine: {
		                        data: [
		                            {type: 'average', name: '平均值'},
		                        ]
		                    }
		                }
		            ]
			        });
		 		}
		    });
		}
    </script>
</body>
</html>